soto inside
https://lh3.googleusercontent.com/a/ACg8ocImQ-oejuPtM4GgByydetqh9o7mFLZRlPdUiWBqIocfDRd1qOM=s96-c#.png
ここはsoto insideのページですCosense Beaver.icon
アカウントの管理ページになります。
このページは、一般公開されません。
閲覧者に向けたプロフィール（自己紹介）などは、別のページを作ってそちらを公開します。
control - i キーを押すと、自分のアイコンsoto inside.iconをすばやく入力できますCosense Beaver.icon
ページ内で一番上にある画像がアイコンに使用されます
ページリスト画面でも表示されます
アイコンは意見の表明や、投票などにも使えますCosense Beaver.icon
なるほど（これは返信の例です）soto inside.icon
#_member　 #_隠しページ　#_掲示板
https://gyazo.com/b84bb44476bd4d27423b5e172ce15729
ここから下には、管理者が提供したsoto inside様専用の改造プログラムがあります。不用意に改変しないようにお願いします。
公開ページ運用プログラム
編集モード　制限解除プログラム
code:RUN.css
.grid-style-itemdata-page-title^="_",
.page-list .grid li:not(.pin) {
display: block !important;
}
/* 各種閲覧専用設定を解除して編集モードに戻す */
.navbar-form,
.navbar .row .col-search {
display: block !important;
padding-left: 50px;
}
.new-button {
display: inline-flex !important;
}
.full-content-modal .modal-body .toolbar {
display: block;
}
.quick-launch .right-box {
display: block !important;
}
.quick-launch .flex-box {
display: flex !important;
}
.kamon {
display: block !important;
}
.page-menu .tool-btn {
display: inline-flex !important;
}
a.random-jump-button.tool-btn.link-btn
{
display: none !important;
}
#translation-menu ,
.page-list-translation-menu .tool-btn {
display: none !important;
}
.editor {
pointer-events: auto !important;
}
code:RUN.js
alert(`
ユーザー：soto_inside 制限解除\n
各種閲覧専用設定を解除して編集モードに変更します！\n
プロジェクト名クリックからTopPageへ移動して下さい。\n\n
ページのリロードをすると元に戻ります。`);
◆ ページタイトルに飾りを付ける。
code:style.css
.line.line-title .text {
padding-bottom: 45px;
line-height: 15px;
position: relative;/*相対位置*/
padding-left: 1.5em;/*アイコン分のスペース*/
line-height: 1.0em;/*行高*/
color: var(--My-page-font-color);
}
.line.line-title .text :before {
font-family: "Font Awesome 5 Free";
content: "\f1b0";/*アイコンのユニコード*/
font-weight: 900;
position: absolute;/*絶対位置*/
font-size: 1em;/*サイズ*/
left: 0;/*アイコンの位置*/
top: 0;/*アイコンの位置*/
color: #8AC75A; /*アイコン色*/
}
◆ ★５のサムネイル画像
code:script.js
scrapbox.PopupMenu.addButton({
title: 'TB5',
onClick: function (text) {
text = text.trim();
text = '' + text + '';
return text;
}
});
◆ ギャラリー用画像
code:script.js
scrapbox.PopupMenu.addButton({
title: '（＃img',
onClick: function (text) {
text = text.trim();
text = '' + text + '';
return text;
}
});
◆ コードブロック内に全角スペースがあってバグることがある。
表示色を変えて警告する。
code:script.js
(() => {
scrapbox.on('lines:changed', showWhitespaceCharacter);
showWhitespaceCharacter();
function showWhitespaceCharacter() {
if (!window.scrapbox.Page.lines) return;
// コードブロック内のchar-indexを全部取ってきて全角か調べる　
const codeCharList =
document.querySelectorAll('.line span.code-block span.indent span.char-index');
for (const c of codeCharList) {
const char = c.textContent; // 文字を取得
if (char.match(/^\x01-\x7E\xA1-\xDF/)) {
// 全角文字の場合
c.style.backgroundColor = '#304050'; // 背景色を設定
c.style.color = '#D99';
c.style.fontWeight = '500'; // フォントの太さを設定
c.style.fontSize = '85%';
c.style.letterSpacing = '1px';
}
}
}
})();
◆ ピっと鳴って ページリロードして 読み込んだスクリプトをリセットする
JavaScriptの同期処理と非同期処理を理解しておこう！
code:script.js
window.SineBeep = function() {
return new Promise((resolve, reject) => {
var context = new AudioContext();
var oscillator = context.createOscillator();
oscillator.type = "sine";
oscillator.frequency.value = 1040;
oscillator.connect(context.destination);
oscillator.start();
var beepDuration = 50; // Beep音の長さを変数に代入
setTimeout(function() {
oscillator.stop();
resolve(); // Promiseを解決して、ビープ音が終了したことを通知
}, beepDuration + 100);
});
};
window.BeepAndReload = function() {
var context = new AudioContext();
var oscillator = context.createOscillator();
oscillator.type = "sine";
oscillator.frequency.value = 880;
oscillator.connect(context.destination);
oscillator.start();
var beepDuration = 50; // Beep音の長さを変数に代入
setTimeout(function () {
oscillator.stop();
// Beep音が鳴り終わった後にリロードを行う
setTimeout(function () {
location.reload();
}, beepDuration);
}, beepDuration + 100);
}
◆ 左上のマークが回転する。
RUN スクリプトが実行中の場合、それをユーザーに知らせる機構も欲しい。
code:script.js
window.BMRunningNow = function() {
// CSSの .brand-icon の表示画像を取得
var img = document.querySelector('.brand-icon');
var deg = 0;
setInterval(function() {
img.style.transform = 'rotate(' + deg + 'deg)';
deg = (deg - 6) % 360;
}, 20);
}
◆ RUN.html　 RUN.css 読み込みモジュール（広域スコープ）
code:script.js
function loadHTML(htmlurl) {
return new Promise((resolve, reject) => {
fetch(htmlurl)
.then(response => response.text())
.then(data => {
if (!document.documentElement.innerHTML.includes(data)) {
var div = document.createElement('div');
div.innerHTML = data;
document.body.appendChild(div);
}
resolve();
});
});
}
function loadCSS(cssurl) {
return new Promise((resolve, reject) => {
var styleSheets = Array.from(document.styleSheets).map(styleSheet => styleSheet.href);
if (!styleSheets.includes(cssurl)) {
var head = document.getElementsByTagName('HEAD')0;
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = cssurl;
head.appendChild(link);
resolve();
}
});
}
◆ RunRunボタン
code:script.js
// オルタネイト動作するのだ
var clickRunRunBT = 0;
// UserScript でボタンを追加する
scrapbox.PageMenu.addMenu({
title: 'RunButton',
image: 'https://i.gyazo.com/b94ffadb83da87972aac00e8afa344db.png',
onClick: () => { // ボタン押されたとき
// RUN がすでに動いていたら
if (clickRunRunBT === 1) {
clickRunRunBT = 0;
BeepAndReload(); // リセットする
} else {
// RUN が動いていない状態で RUN ボタンが押されたら
var RUNcurrentUrl = decodeURIComponent(window.location.href);
// プロジェクト名/ページ名を切り出す
var PPname = RUNcurrentUrl.split('https://scrapbox.io/')[1];
// HTML CSS JavaScript 各 URLにする
var RUNhtmlurl = 'https://scrapbox.io/api/code/' + PPname + '/RUN.html';
var RUNcssurl = 'https://scrapbox.io/api/code/' + PPname + '/RUN.css';
var RUNjsurl = 'https://scrapbox.io/api/code/' + PPname + '/RUN.js';
// HTML と CSS を読み込む。無くてもエラーにならない。
Promise.all(loadHTML(RUNhtmlurl), loadCSS(RUNcssurl))
.then(() => {
// RUN.js を読み取って、スクリプトに追加して間接的に実行する
clickRunRunBT = 1;
BMRunningNow();
// Fetch APIを使用して JavaScriptを取得
fetch(RUNjsurl)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
var existingScript = document.querySelector(script[src="${RUNjsurl}"]);
if (!existingScript) {
var elm = document.createElement('script');
elm.setAttribute('src', RUNjsurl);
elm.onload = function() {
this.remove();
};
document.body.appendChild(elm);
}
})
.catch(error => {
alert(`RUN.js にアクセスできません。\n
おそらくこのページに code:RUN.js が書かれていないものと思われます。`);
// RUN.js は必須
BeepAndReload(); // なくってもリセット
});
});
}
}
})
◆ ページ上部に更新日時を書く
code:script.js
function getHtml (dateString) {
return '<span class="page-last-update" style="position: absolute; font-size: 12px; top: 15px; right: 0px; color: #AAA; ">・ ' + dateString + '</span>'
}
function setOrUpdateTime () {
if (scrapbox.Layout !== 'page') return
let dateString = $('.page-menu .date-label').eq(1).attr('title')
if ($('.page-last-update').length > 0) {
$('.page-last-update').text('・ ' + dateString);
} else {
$('.editor').append(getHtml(dateString))
}
}
new MutationObserver(setOrUpdateTime)
.observe(document.querySelector('title'), { childList: true })
setOrUpdateTime();
◆ 時報　⏲
code:script.js
// MP3ファイルのURL 時報っぽいチャイムのサウンドデータ
var ChimeMP3UrlA = 'https://scrapbox.io/files/66623f4737241d001d29763f.mp3';
var ChimeMP3UrlB = 'https://scrapbox.io/files/6662d46ee77a68001d99c79c.mp3';
var ChimeMP3UrlC = 'https://scrapbox.io/files/6664c3a79458fa001c24911e.mp3';
var ChimeMP3UrlD = 'https://scrapbox.io/files/6664c07d2aed1d001c426621.mp3';
// Audioオブジェクトを作成
var ChimeAudio1 = new Audio(ChimeMP3UrlB);
var ChimeAudio2 = new Audio(ChimeMP3UrlC);
// 時報を鳴らす関数
function playHourlyChime() {
var now = new Date();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
if (minutes === 59 && seconds > 55) { // 毎時59分56秒頃に
ChimeAudio1.play();
}
if (minutes === 30 && seconds < 1) { // 毎時　　30分に
ChimeAudio2.play();
}
}
// 1秒ごとに時刻をチェック　　時報誤差　最大　１秒
setInterval(playHourlyChime, 1000);